<template>
    <div>
      <q-field icon="search">
          <q-input v-model.trim="keywords" max-length=255
            placeholder="搜索商品/粘贴商品标题/粘贴长链接地址"
            :after="[{icon: 'send', content: true, handler:searchAction }]"
            @keyup.enter.native="searchAction"
            />
      </q-field>
      <q-card-separator />
      <h6 style="text-align: center;" v-if="couponList.length<=0">
      <q-icon name="insert emoticon" color="blue"/>抱歉,未查询到你要的宝贝</h6>
      <common-compo v-else v-on:trigger-refresh="refresher" 
          :enableScrollLoading="scrollLoading" enableToTop>
        <div v-for="(item,index) in couponList" :key="index" slot="content">
           <q-card>
                <!-- 配图 -->
                <span style="height:40px" >
                  <q-gallery :src="'http:'+item.pictUrl | strToArr"/>
                </span>
                <!-- 内容 -->
                <q-item>
                    <q-item-tile  icon="store"/>
                    <q-item-main>
                       <q-item-tile label>{{item.shopTitle}}</q-item-tile>
                    </q-item-main>
                </q-item>
                <q-item>
                    <q-item-main>
                        <span style="font-size: 14px;font-family: fantasy;color: #146163;" v-html="item.title"></span>
                    </q-item-main>
                </q-item>
                <q-item>
                    <!-- style="text-decoration: line-through" -->
                    <q-item-main>￥ {{item.zkPrice}}</q-item-main>
                    <q-item-main >
                        <span style="color:red;font-size: 1.3rem">
                          券-{{item.couponAmount}}元
                        </span>
                    </q-item-main>
                    <q-item-side> 余 {{item.couponLeftCount}} 张</q-item-side>
                    <q-item-side>月销: {{item.biz30day}}</q-item-side>
                </q-item>
                <q-btn class="full-width" outline	glossy color="black" @click="getCoupon(item.auctionId)" >立即抢券</q-btn>
                <q-card-separator />
          </q-card>
          <q-card-separator />
        </div>
      </common-compo>
      <!-- 领券窗口 -->
       <q-modal minimized ref="couponItemModal" :content-css="{minWidth: '100vw', minHeight: '60vh'}">
          <q-modal-layout>
            <q-toolbar slot="header">
              <q-toolbar-title class="text-center">
                  复制链接到淘宝
              </q-toolbar-title>
            </q-toolbar>

            <div class="layout-padding private-policy">
              <q-item> <q-item-main> 商品链接:</q-item-main></q-item>
              <q-item>
                  <q-item-main>
                      <q-input v-model.trim="couponItem.taoToken" placeholder="搜索商品/粘贴商品链接"/>
                  </q-item-main>
                    <q-item-side>
                      <q-btn v-clipboard="couponItem.taoToken" @success="doCopy" @error="doCopyError" flat color="warning">
                        点击复制
                      </q-btn>
                    </q-item-side>
              </q-item>
             
              <q-item> <q-item-main> 卡券链接:</q-item-main></q-item>
              <q-item>
                  <q-item-main>
                    <q-input v-model.trim="couponItem.couponLinkTaoToken"/>
                  </q-item-main>
                  <q-item-side>
                    <q-btn v-clipboard="couponItem.couponLinkTaoToken" @success="doCopy" @error="doCopyError" flat color="warning">
                      点击复制
                    </q-btn>
                  </q-item-side>
              </q-item>
            </div>
          </q-modal-layout>
        </q-modal>

    </div>
</template>

<script>
import {
  QBtn,
  QCard,
  QCardSeparator,
  QItem,
  QItemSeparator,
  QItemSide,
  QItemMain,
  QItemTile,
  QIcon,
  QField,
  QInput,
  QGallery,
  QModal,
  QModalLayout,
  QToolbar,
  QToolbarTitle,
  Alert
} from "quasar";
import commonCompo from "../common-compo";
import couponApi from "../../../https/couponApi";

export default {
  components: {
    QBtn,
    QCard,
    QCardSeparator,
    QItem,
    QItemSeparator,
    QItemSide,
    QItemMain,
    QItemTile,
    QIcon,
    QField,
    QInput,
    QGallery,
    commonCompo,
    QModal,
    QModalLayout,
    QToolbar,
    QToolbarTitle,
    Alert
  },
  data() {
    return {
      scrollEle: null,
      scrollLoading: false,
      couponList: [],
      page: 0,
      totalPages: 0,
      keywords: "",
      couponItem: {
        couponLinkTaoToken: "￥HCIPb5WpKCH￥",
        taoToken: "￥WKE7b5WpJzo￥"
      }
    };
  },
  mounted() {
    // this.couponList = [
    //     {
    //       auctionId: 576695971252,
    //       pictUrl:
    //         "//img.alicdn.com/bao/uploaded/i3/2085054302/O1CN011heMKbgQhvaKHSP_!!2085054302.jpg",
    //       title:
    //         "皮鞋男真皮2018新款透气牛筋底男鞋防滑防油防水厨师男士休闲<span class=H>鞋子</span>",
    //       couponAmount: 10,
    //       couponLeftCount: 500,
    //       zkPrice: 69,
    //       biz30day: 4432,
    //       tkRate: 6,
    //       tkCommFee: 4.14,
    //       shopTitle: "川霸鞋业",
    //       couponTotalCount: 500
    //     },
    //     {
    //       auctionId: 576174047296,
    //       pictUrl:
    //         "//img.alicdn.com/bao/uploaded/i3/1119495891/TB2CSKLrIUrBKNjSZPxXXX00pXa_!!1119495891.jpg",
    //       title:
    //         "足力健安全老人鞋正品爸爸鞋中老年健步透气防滑软底防水老人<span class=H>鞋子</span>",
    //       couponAmount: 10,
    //       couponLeftCount: 8160,
    //       zkPrice: 119,
    //       biz30day: 504,
    //       tkRate: 1.35,
    //       tkCommFee: 1.61,
    //       shopTitle: "正品健步老人鞋直销店",
    //       couponTotalCount: 10000
    //     }
    //   ];
    this.loadData();
  },
  methods: {

    clearData() {
      this.couponList= [],
      this.page= 0,
      this.totalPages=0,
      this.couponItem={
        couponLinkTaoToken: "",
        taoToken: ""
      }
    },
    searchAction() {
      this.loadData(true)
    },
    loadData(_isSearch) {
      console.log("加载数据...");
      let paramstr="?size=20&page=" + this.page + "&keywords=" + this.keywords;
      const _prelength = this.couponList.length;
      couponApi
        .getList(paramstr)
        .then(res => {
          const { status, data: { content, totalPages } } = res;
          if (status == 200 && content) {
            if(_isSearch) {
                console.log('点击搜索...');
                this.clearData();
                this.couponList = content;
            } else {
                console.log('查询数据');
                this.couponList = this.couponList.concat(content);
            }
            this.totalPages = totalPages;
            this.isStopRefresher(_prelength,this.couponList.length);
          }
        })
        .catch(err => {});
    },
    getCoupon(auctionId) {
      console.log("领券:", auctionId);
      if(auctionId) {
        couponApi
          .takeOne(auctionId)
          .then(res => {
            const { status, data } = res;
            if (status == 200 && data) {
              this.couponItem = data;
              this.$refs.couponItemModal.open();
            } else {
              this.createAlert("warning","线路不通,稍后重试...");
            }
          })
          .catch(err => {});
      }
    },
    createAlert(_color,_msg){
      const _msgAlert = Alert.create({
        color: _color,
        icon: "tag_faces",
        html: _msg,
        position: "bottom"
      });
      setTimeout(() => {
        _msgAlert.dismiss();
      }, 3000);
    },
    // 复制成功
    doCopy(e) {
      console.log(e);
      this.createAlert("positive","复制成功,前往打开淘宝应用");
    },
    // 复制失败
    doCopyError(e) {
      console.log("复制内容失败:", e);
      this.createAlert("warning","复制失败,尝试手动复制");
    },
     refresher(_ele) {
      this.scrollEle = _ele;
      this.scrollLoading = true;
      this.page++;
      console.log("控制滚动元素：page=",this.page,",totalPages=",this.totalPages);
      if (this.page > this.totalPages-1) {
        _ele.stop();
        this.scrollLoading = false;
        return;
      }
      this.loadData();
    },
    isStopRefresher(_prelength,_suflength) {
      console.log("前,", _prelength, "后,", _suflength);
      if (_prelength == _suflength) {
        console.log('停止滚动');
        this.scrollEle.stop();
        this.scrollLoading = false;
      }
    }
  }
};
</script>
